<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript"
	src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
	<div class="span12">
		<div class="row-fluid">
			<form class="span12 filterValidate">
				<div class="box">
					<div class="title">
						<h4>
							<span class="icon16 icomoon-icon-filter"></span> <span>Filter</span>
						</h4>
						<a href="#" class="minimize">Minimize</a>
					</div>
					<div class="content clearfix form-horizontal">

						<div class="form-row row-fluid">
							<div class="span3">
								<label class="form-label span6">Facility</label>
								<div class="span6 controls">
									<select field="facility.id" class="filterdata" op="eq">
										<option value="">---Select---</option>
										<c:forEach items="${facilities}" var="entity">
											<option value="${entity.id}">${entity.name}</option>
										</c:forEach>

									</select>
								</div>
							</div>
							<div class="span3">
								<label class="form-label span6">Start Date</label> <input
									class="span6 filterdata datepicker" type="text" field="day"
									op="ge" />
							</div>
							<div class="span3">
								<label class="form-label span6">End Date</label> <input
									class="span6 filterdata datepicker" type="text" field="day"
									op="le" />
							</div>
							<div class="span3">
									<label class="form-label span6" for="bookingStatus">Booking
										Status : :</label>
									<div class="span6 controls">
										<select field="bookingStatus"  class="filterdata" op="eq" ><c:if
												test="${not empty bookingStatuses}">
												<option value="">---Select---</option>
												<c:forEach var="single" items="${bookingStatuses}">
													<option value="${single}"
														${(single == entity.bookingStatus)?'selected':'' }>${single}</option>
												</c:forEach>
											</c:if></select>
									</div>
								</div>
						</div>


					</div>
				</div>
			</form>
		</div>


		<div class="box gradient">
			<div class="title">
				<h4>
					<span>Report </span>
				</h4>
				<a href="#" class="minimize">Minimize</a>
			</div>
			<div class="content scrollable clearfix">
				<table class="ajaxTable display table table-bordered">
					<thead>
						<tr>
							<th><a id="select_all"><span
									class="icomoon-icon-checkmark-2"></span></a></th>
							<th>Facility</th>
							<th>Booking Day</th>
							<th>Unit Number</th>
							<th>Booking Session</th>
							<th>Submit time</th>
							<th>Remark</th>
							<th>Booking Status</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>

	</div>
</div>
<script type="text/javascript">
	var render = false;

	$(document).ready(function() {
		johnny.oTable = $('.ajaxTable').dataTable({
			"aoColumnDefs" : [ {
				'bSortable' : false,
				'aTargets' : [ 0 ]
			} ],
			"bLengthChange" : true,
			"sAjaxSource" : '${ctx}/admin/facility-booking/',
			"fnInitComplete" : function(oSettings, json) {
			}
		});
		var name = $("<input>").attr({
			type : "text",
			field : "member.unitNumber",
			op : "cn",
			placeholder : "Unit Number",
			class : "filterdata"
		});
		johnny.initTableQuery(name);

		$(".filterdata").keyup(function() {
			johnny.updateGrid();
		});
		$(".filterdata").change(function() {
			johnny.updateGrid();
		});

	});

	var columnHeader = [ '', 'facility.id', 'day', 'member.id',
			'bookingSession.id', 'remark','bookingStatus' ];
	var QueryData = function(aoData) {
		return johnny.initQueryData(aoData, columnHeader);
	}

	var DataTableForm = function(json, echo) {
		var dataArray = new Array();
		for (var i = 0; i < json.result.length; i++) {
			var subArray = new Array();
			var value = johnny.getForSelect(json.result[i].id);
			subArray.push(value);
			subArray.push(json.result[i].facility.name);
			subArray.push(json.result[i].day);
			subArray.push(json.result[i].member.unitNumber);
			subArray.push(json.result[i].bookingSession.fromTo);
			subArray.push(json.result[i].bookingTime);
			subArray.push(json.result[i].remark);
			subArray.push(json.result[i].bookingStatus);
			dataArray.push(subArray);
		}
		return {
			sEcho : echo,
			iTotalRecords : json.totalCount,
			iTotalDisplayRecords : json.totalCount,
			aaData : dataArray
		};
	}
</script>
<body>